<template>
	<view class="box" v-if="info">
		<view class="hb-img">
			<image :src="img" mode="widthFix"></image>
		</view>
		<view class="add" @click="add">新增海报</view>
		<view class="box-title">我的海报</view>
		<view class="box-scroll">
			<view :class="current === index ? 'box-scroll-item box-scroll-item-ac' : 'box-scroll-item' "
				v-for="(it,index) in info.my_poster" @click="setCurrent(index)">
				<image :src="it.img" mode="" class="box-scroll-item-img" mode="aspectFill"></image>
				<image :src="ossUrl + '/static/image/6.png'" mode="" class="box-scroll-item-del" @click.stop="del(it.id,index)" v-if="it.type != '3'"></image>
				<view class="box-scroll-item-footer">
					<view @click.stop="save(it.img)">
						<image :src="ossUrl + '/static/image/5.png'" mode=""></image>
						下载
					</view>
					<view @click.stop="edit(it)" v-if="it.poster_design_id">
						<image :src="ossUrl + '/static/edit.png'" mode=""></image>
						编辑
					</view>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="form-title">上传已有海报</view>
			<view class="form-input upload" @click="upload">
				<view class="upload-item-add">
					<image :src="ossUrl + `/static/5.png`" mode=""></image>
				</view>
				<!-- <view class="upload-item-img">
					<image src="/static/图层 2.png" mode=""></image>
				</view> -->
			</view>
		</view>
		<view class="btns" @click="submit">保存</view>
	</view>
</template>

<script>
	import {
		InformationShareStyles,
		InformationPosterIntroduction,
		InformationDelPoster,
		InformationSavePoster,
		InformationAddPoster
	} from '@/common/http/api.js'
	import {
		uploadImg,
		uploadVideo,
		uploadDel
	} from '@/common/upload.js'
	export default {
		props:['circle_id'],
		data() {
			return {
				info: '',
				current: 0,
				img: '',
				id: '',
			};
		},
		created() {
			this.init()
		},
		methods: {
			edit(it){
				uni.setStorageSync('posterForm', it.parameter)
				uni.navigateTo({
					url:'/pagesA/posterDesign/add?type=1&id=' + it.poster_design_id + '&editId=' + it.id
				})
			},
			submit(){
				if(this.img === '') {
					if(Array.isArray(this.info.my_poster) && this.info.my_poster.length > 0){
						uni.showToast({duration:3000,
							title:'请选择已有海报',
							icon:'none'
						})
						return
					} else {
						uni.showToast({duration:3000,
							title:'请新增海报',
							icon:'none'
						})
						return
					}
					
				}
				if(this.id === '') {
					//上传已有
					let data = {
						img:this.img,
						type: 2,
						parameter: {},
						poster_design_id: 0
					}
					uni.showLoading()
					InformationAddPoster(data).then(res=>{
						uni.hideLoading()
						uni.showLoading()
						InformationSavePoster({id: res.data.id}).then(res=>{
							uni.hideLoading()
							this.$store.commit('setIsRefresh', true)
							uni.showToast({duration:3000,
								title:'保存成功',
								icon: 'none'
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1500)
							
						})
					})
				} else {
					uni.showLoading()
					InformationSavePoster({id: this.id}).then(res=>{
						uni.hideLoading()
						this.$store.commit('setIsRefresh', true)
						uni.showToast({duration:3000,
							title:'保存成功',
							icon: 'none'
						})
						setTimeout(()=>{
							uni.switchTab({
								url:"/pages/index/index"
							})
						},1500)
					})
				}
			
			},
			setCurrent(index) {
				this.current = index
				this.img = this.info.my_poster[index].img
				this.id = this.info.my_poster[index].id
			},
			init() {
				uni.showLoading()
				InformationPosterIntroduction({circle_id: this.circle_id}).then(res => {
					uni.hideLoading()
					this.info = res.data
					
					this.img = res.data.poster.poster || ''
					this.id = res.data.poster.id || ''
					if(Array.isArray(res.data.my_poster) && res.data.my_poster.length > 0) {
						res.data.my_poster.forEach((i,index)=>{
							if(i.img === this.img) {
								this.current = index
							}
						})
					}
				})
			},
			add() {
				uni.navigateTo({
					url: '/pagesA/posterDesign/list'
				})
			},
			del(id,index) {
				if(index === this.current) {
					uni.showToast({duration:3000,
						title:"默认海报无法删除",
						icon:'none'
					})
					return
				}
				InformationDelPoster({
					id
				}).then(res => {
					this.init()
				})
			},
			save(url) {
				uni.getImageInfo({
					src: url,
					success: function (image) {
						console.log('getImageInfo',image);
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: () => {
								uni.showToast({duration:3000,
									title: '图片已保存到相册',
									icon: 'success'
								});
							},
							fail: (err) => {
								console.error('保存图片失败:', err);
								uni.showToast({duration:3000,
									title: '保存图片失败',
									icon: 'none'
								});
							}
						});
					}
				});
				
			},
			upload(){
				uploadImg().then(res => {
					console.log('上传', res)
					this.img = res.data.url
					this.current = ''
					this.id = ''
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding-top: 30rpx;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.hb-img {
		width: 632rpx;
		margin: 0 auto;
		margin-bottom: 40rpx;
	}

	.add {
		width: 667rpx;
		height: 93rpx;
		border-radius: 47rpx;
		// border: 1px solid #12B475;
		background: #12B475;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #fff;
		margin: 0 auto;
		margin-bottom: 40rpx;
	}

	.box-title {
		font-size: 28rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
		width: 690rpx;
	}

	.box-scroll {
		width: 100%;
		white-space: nowrap;
		overflow-x: scroll;
		padding-top: 30rpx;
		margin-bottom: 30rpx;

		.box-scroll-item {
			display: inline-block;
			width: 232rpx;
			height: 328rpx;
			position: relative;
			margin-left: 30rpx;

			.box-scroll-item-img {
				width: 100%;
				height: 100%;
			}

			.box-scroll-item-del {
				width: 59rpx;
				height: 59rpx;
				position: absolute;
				top: -28rpx;
				right: -28rpx;
				z-index: 2;

			}

			.box-scroll-item-footer {
				width: 100%;
				height: 76rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 2;
				background: rgba(0, 0, 0, 0.7);
				display: flex;
				align-items: center;
				view {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					
					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
					
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #F6F7F8;
				}
				
			}
		}
		.box-scroll-item-ac {
			border: 14rpx solid seagreen;
		}
	}

	.form {
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;

		.form-title {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #131313;
			margin-bottom: 26rpx;

			text {
				color: #FF8400;
				font-size: 24rpx;
			}
		}

		.form-input {
			width: 100%;

			&>input {
				width: 690rpx;
				height: 80rpx;
				background: #F0F0F0;
				border-radius: 6rpx;
				box-sizing: border-box;
				padding: 0 20rpx;
			}

		}

		.upload {
			width: 200rpx;
			height: 140rpx;

			border-radius: 6rpx;

			.upload-item-add {
				background: #F0F0F0;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.radio {
			display: flex;
			flex-wrap: wrap;

			.radio-item {
				height: 53rpx;
				border-radius: 26rpx;
				border: 1px solid #999999;
				padding: 14rpx 48rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}

			.radio-item-ac {
				background: #12B475;
				border-radius: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				border: none;
			}
		}

		.textarea {
			textarea {
				width: 100%;
				height: 160rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 29rpx 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
			}

			.textarea-ac {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
			}
		}

		.price {
			.price-input {
				display: flex;
				align-items: center;

				input {
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 32rpx;
					color: #FF4B4B;
					width: 321rpx;
					height: 74rpx;
					background: #FFFFFF;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding: 0 25rpx;
					margin-right: 20rpx;
				}

				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #131313;
			}
		}
	}

	.btns {
		width: 660rpx;
		height: 86rpx;
		background: #12B475;
		border-radius: 43rpx;
		display: flex;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>